<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX Axios</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
    <style>
    #result {
        width: 300px;
        height: 100px;
        border: solid 1px;
      }
    </style>
  </head>
  <body>
    <button id="btn1">Get</button><br/>
    <button id="btn2">Post</button><br/>
    <button id="btn3">Ajax</button>
    <div id="result"></div>

    <script>
      const btn = document.getElementById("btn1");
      const btn2 = document.getElementById("btn2");
      const btn3 = document.getElementById("btn3");
      const result = document.getElementById("result");

      axios.defaults.baseURL = 'http://localhost:8080'
      

      btn.onclick = function(){
        axios.get('http://localhost:8080/axios', {
          params:{
            id: 100,
            vip: 7
          },
          headers: {
            name: 'get',
            age: 18
          }
        }).then(value=>{
          console.log(value);
          result.innerHTML = 'Get: ' +value.data.work;
        })
      };

      btn2.onclick = function(){
        axios.post('http://localhost:8080/axios', {
            user: 'admin',
            password: 'adminp'
          }, {
          params:{
            id: 101,
            vip: 7
          },
          headers: {
            name: 'post',
            age: 18
          }
        }).then(value=>{
          console.log(value);
          result.innerHTML = 'Post: '+ value.data.work;
        })
      };

      btn3.onclick = function(){
        axios({
          method: 'POST',
          url: 'http://localhost:8080/axios',
          params:{
            vip:102,
            level:30
          },
          headers: {
            name: 'axios',
            age: 18
          }, 
          data:{
            username:'admin',
            password: 'admin2'
          }

        }).then(value=>{
          console.log(value);
          result.innerHTML = 'Axios: '+ value.data.work;
        })
      };


    </script>
  </body>
</html>
